<template>
  <div class="platform_order_import_index">
    <c-title :hide="false" :text="plugin_name"></c-title>
    <div class="platform_order_import_index_box">
      <div class="inpBox">
        <input type="text" v-model.trim="sn" :placeholder="input_prompt || '请输入订单号'" />
        <span>{{ input_prompt_explain }}</span>
      </div>
      <div class="btnBox">
        <div class="btn" @click="convert">一键转换</div>
        <router-link tag="div" :to="fun.getUrl('platform_order_import_recode')" class="btn btnT">转换记录</router-link>
      </div>
      <div class="imgBox">
        <div v-html="introduce"></div>
      </div>
    </div>
    <van-popup v-model="show" style="background: transparent;">
      <div class="successImg">
        <img :src="success_icon" alt="" />
        <span>转换成功！</span>
      </div>
      <div class="popupBox" v-if="reward&&reward.length!==0">
        <div class="title">获得以下奖励</div>
        <div class="reward_list">
          <div class="reward_lis" v-for="(item, ind) in reward" :key="ind">
            <div class="imgBox">
              <img :src="item.icon" alt="" />
            </div>
            <div class="rewardTxt"><span class="txt">+{{ item.value }}</span>{{ item.name }}</div>
            <div class="rewardBtn" @click="goto(item.code)">去查看</div>
          </div>
        </div>
      </div>
      <i class="iconfont icon-adsystem_icon_cancle" @click="show = false"></i>
    </van-popup>
  </div>
</template>
<script>
import { Dialog } from 'vant';

export default {
  data() {
    return {
      timer:null,
      show: false,
      sn: "",
      plugin_name: "",
      input_prompt: "",
      input_prompt_explain: "",
      introduce: "",
      success_icon: "",
      reward: [],
      timer_num:0,
    };
  },
  destroyed(){
    this.timer && clearInterval(this.timer);
  },
  deactivated () {
    this.timer && clearInterval(this.timer);
  },
  activated() {
    if (this.timer) {
      clearInterval(this.timer);
    }
    this.timer_num = 0;
    this.show = false;
    this.getData();
  },
  methods: {
    getData() {
      $http.get("plugin.platform-order-import.frontend.index.home", '', '').then(({ result, msg, data }) => {
        if (result !== 1) {
          return this.$toast(msg);
        }
        this.plugin_name = data.plugin_name;
        this.fun.setWXTitle(data.plugin_name)
        this.input_prompt = data.input_prompt;
        this.input_prompt_explain = data.input_prompt_explain;
        this.plugin_switch = data.plugin_switch;
        this.introduce = data.introduce;
        this.success_icon = data.success_icon;
      })
    },
    async get_reward(oid) {
      if(this.timer_num <= 30){
        let { result, msg, data }  =  await $http.get("plugin.platform-order-import.frontend.index.order-reward", { oid }, '')
        if (result !== 1) return this.$toast(msg);
        if (data.status) {
          this.reward = data.reward;
          this.show = true;
          this.timer_num = 0;
          clearInterval(this.timer);
          this.timer = null;
          return;
        }
        if(!this.timer){
          this.timer = setInterval(() => {
            this.timer_num = this.timer_num++
            this.get_reward(oid);
          }, 1000);
        }
      }else{
        clearInterval(this.timer);
        this.timer = null;
        this.timer_num = 0;
        Dialog.alert({
            message: '队列超时请联系商家处理',
          }).then(() => {
            // on close
          });
      }

    },
    goto(code) {
      if (code == 'point') {
        this.$router.push(this.fun.getUrl('integral_v2'));
      } else if (code == 'love') {
        this.$router.push(this.fun.getUrl('love_index'));
      } else if (code == 'balance') {
        this.$router.push(this.fun.getUrl('balance'));
      } else if (code == 'integral') {
        this.$router.push(this.fun.getUrl('Integral_love'));
      }
    },
    convert() {
      console.log(this.timer_num,'this.timer_num')
      $http.get('plugin.platform-order-import.frontend.index.one-touch-convert', { sn: this.sn }, '').then(({ result, msg, data }) => {
        if (result !== 1) {
          Dialog.alert({
            message: msg,
          }).then(() => {
            // on close
          });
          return
        }

        this.get_reward(data.order_id)

      })
    },
  }
};
</script>
<style lang="scss" scoped>
.platform_order_import_index {
  overflow: hidden;

  .platform_order_import_index_box {
    margin: 0.63rem 0.75rem;
    background: #fff;
    border-radius: 0.5rem;
    padding: 1.03rem 0.75rem;
    box-sizing: border-box;

    .imgBox {
      width: 100%;

      img {
        width: 100%;
        height: auto;
      }
    }

    .btnBox {
      margin: 1.59rem 0 1.88rem 0;
      display: flex;
      flex-direction: column;
      align-items: center;

      .btn {
        width: 15.31rem;
        height: 2.5rem;
        background: #f15353;
        border-radius: 1.5rem;
        line-height: 2.5rem;
        text-align: center;
        color: #fff;
        margin-bottom: 0.94rem;
        font-weight: 500;
      }

      .btnT {
        background: #fff;
        border: 0.03rem solid #f15353;
        color: #f15353;
        margin-bottom: 0;
      }
    }

    .inpBox {
      width: 100%;
      text-align: left;

      input {
        border-radius: 0.63rem;
        width: 100%;
        height: 2.5rem;
        border: 0.03rem solid #d6d6dc;
        text-indent: 0.63rem;
      }

      span {
        font-size: 0.75rem;
        color: #aaaab3;
        margin-left: 0.25rem;
        line-height: 0.85rem;
        margin-top: 0.31rem;
      }
    }
  }
}

// 弹窗
.successImg {
  // width: 5.0938rem;
  height:5.3125rem;
  margin: 0 auto;
  position: relative;
  img {
    width: 5.3125rem;
    // height: 100%;
    display: block;
    border-radius: 50%;
  }

  span {
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
  }
}

.popupBox {
  width: 17.5rem;
  background: #ffffff;
  border-radius: 1.13rem;
  margin-bottom: 1.56rem;
  padding: 0 0.94rem;
  box-sizing: border-box;
  overflow: hidden;
  box-sizing: border-box;
  padding-top: 4.5rem;
  margin-top: -2.6563rem;
  padding-bottom: 1.09rem;

  .title {
    font-weight: bold;
    font-size: 0.88rem;
    text-align: left;
    margin-bottom: 0.78rem;
  }

  .reward_list {
    .reward_lis {
      margin-bottom: 0.63rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .imgBox {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        flex-shrink: 0;

        img {
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 50%;
        }
      }

      .rewardTxt {
        flex: 1;
        margin-left: 0.5rem;
        font-size: 0.88rem;
        text-align: left;
        font-weight: bold;

        .txt {
          color: #f15353;
        }
      }

      .rewardBtn {
        width: 3.63rem;
        height: 1.75rem;
        background: #f15353;
        border-radius: 1.88rem;
        color: #ffffff;
        text-align: center;
        line-height: 1.75rem;
      }
    }

    .reward_lis:last-child {
      margin-bottom: 0;
    }
  }
}

.icon-adsystem_icon_cancle {
  font-size: 2rem;
  color: #ffffff;
}
</style>
